<!DOCTYPE html>
<!--跟标签-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!--  html 编码格式  -->
    <meta charset="UTF-8">
    <!--  标题标签  -->
    <title>登录</title>
</head>
<body>
<h2 th:text="${message}"></h2>
<div style="margin-left: 716px;margin-top: 100px;">

<!--    <table id="GroupTable"></table>-->
    <table class="table">
        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <tr th:each="user:${userList}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.username}"></td>
            <td th:text="${user.password}"></td>

            <td><button th:onclick="'javascript:login(\''+${user.id}+'\');'">详情</button></td>
        </tr>
        </tbody>
    </table>

</div>
<h2 id="name"></h2>
<input id="id" type="text" placeholder="请输入id">
<button onclick="find()">查询</button>
</body>

<script type="text/javascript">
    window.onload = function () {
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/user/select",
            dataType: "json",
            success: function (data) {
                var tbodyPage = "";
                for (var i = 0; i < data.length; i++) {
                    tbodyPage = tbodyPage +
                        '<tr>' +
                        '<td>' +
                        '<th>' + data[i].id + '</th>'+
                        '<th>' + data[i].username + '</th>' +
                        '</td>'
                        + '</tr>'
                }
                $("#GroupTable").html(tbodyPage);
            }
        });
    }
    function find() {
        var id = $("#id").val()

        $.ajax({
            type:"get",
            url:"http://localhost:8080/user/findById",
            dataType: "json",
            data:{"id":id},
            success:function(data){

                $("#name").html("欢迎" +data.username + "登录");
            }
        });


    }

</script>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.js"></script>
</html>

